<template>
  <div class="newAlbum">
    <!-- 头部导航栏 -->
    <van-nav-bar
      style="background-color: #f1bf83; height: 7.7%"
      title="新建相册"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 上传图片 -->
    <div class="uploadPic">
      <uploader @func="getPicUrl"></uploader>
    </div>
    <!-- 相册描述区 -->
    <div class="writeCon">
      <van-cell-group>
        <van-field v-model="albumName" placeholder="填写相册名" />
      </van-cell-group>
      <van-field
        v-model="album_msg"
        rows="4"
        autosize
        type="textarea"
        placeholder="相册描述"
        class="field_con"
      />
    </div>
    <!-- 权限设置 -->
    <div class="album_power">
      <div>
        <van-radio-group v-model="power_radio" direction="horizontal">
          <span>相册权限:</span>
          <van-radio name="1">公开</van-radio>
          <van-radio name="0">私密</van-radio>
        </van-radio-group>
      </div>
      <div style="margin-top: 10px">
        <van-radio-group v-model="top_radio" direction="horizontal">
          <span>相册置顶:</span>
          <van-radio name="1">置顶</van-radio>
          <van-radio name="0">不置顶</van-radio>
        </van-radio-group>
      </div>
    </div>
    <!-- 灰色线 -->
    <div class="liner"></div>
    <!-- 主题 -->
    <div class="theme">
      <h4 class="theme_title">主题</h4>
      <div class="theme_type">
        <van-tabbar
          v-model="active"
          class="theme"
          active-color="#ccc"
          inactive-color="#000"
        >
          <van-tabbar-item>
            <span>普通</span>
            <template #icon="props">
              <img
                :src="props.active ? icon.Normalactive : icon.Normalinactive"
              />
            </template>
          </van-tabbar-item>
          <van-tabbar-item>
            <span>情侣</span>
            <template #icon="props">
              <img
                :src="props.active ? icon.Coupleactive : icon.Coupleinactive"
              />
            </template>
          </van-tabbar-item>
          <van-tabbar-item>
            <span>旅游</span>
            <template #icon="props">
              <img
                :src="props.active ? icon.Travelactive : icon.Travelinactive"
              />
            </template>
          </van-tabbar-item>
          <van-tabbar-item>
            <span>共享</span>
            <template #icon="props">
              <img
                :src="props.active ? icon.Sharedactive : icon.Sharedinactive"
              />
            </template>
          </van-tabbar-item>
          <van-tabbar-item>
            <span>亲子</span>
            <template #icon="props">
              <img
                :src="props.active ? icon.Parrentactive : icon.Parrentinactive"
              />
            </template>
          </van-tabbar-item>
        </van-tabbar>
      </div>
    </div>
    <!-- 成员 -->
    <div class="people">
      <h4 class="people_title">成员</h4>
      <div class="people_num">
        <van-row type="flex">
          <van-col :span="4.8"
            ><van-image
              round
              width="50"
              height="50"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
          /></van-col>
          <van-col :span="4.8"
            ><van-image
              round
              width="50"
              height="50"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
          /></van-col>
          <van-col :span="4.8"
            ><van-image
              round
              width="50"
              height="50"
              src="https://img01.yzcdn.cn/vant/cat.jpeg"
          /></van-col>
        </van-row>
      </div>
    </div>
    <!-- 提交 -->
    <van-button
      type="primary"
      style="width: 71.4%; margin: 28.9% auto 6.2%; border-radius: 20px"
      color="#f7c387"
      block
      size="normal"
      @click="btn"
      >提交</van-button
    >
  </div>
</template>

<script>
import uploader from "../../components/common/uploader.vue";
export default {
  components: {
    uploader,
  },
  data() {
    return {
      //获取填写的相册名
      albumName: "",
      //获取文件描述
      album_msg: "",
      //权限选择按钮
      power_radio: "1",
      //置顶选择按钮
      top_radio: "1",
      // 判断用户是否点击
      active: 0,
      icon: {
        Normalactive: require("../../static/images/normal_full.png"),
        Normalinactive: require("../../static/images/normal.png"),
        Coupleactive: require("../../static/images/couple_full.png"),
        Coupleinactive: require("../../static/images/couple.png"),
        Travelactive: require("../../static/images/travel_full.png"),
        Travelinactive: require("../../static/images/travel.png"),
        Sharedactive: require("../../static/images/shared_full.png"),
        Sharedinactive: require("../../static/images/shared.png"),
        Parrentactive: require("../../static/images/parrent_full.png"),
        Parrentinactive: require("../../static/images/parrent.png"),
      },
    };
  },
  methods: {
    //获取相册头像的地址
    getPicUrl(data) {
      this.album_url = data;
    },
    //退回上一级
    onClickLeft() {
      this.$router.push({ path: "/album" });
    },
    btn() {
      if (this.active === 0) this.active = "普通";
      if (this.active === 1) this.active = "情侣";
      if (this.active === 2) this.active = "旅游";
      if (this.active === 3) this.active = "共享";
      if (this.active === 4) this.active = "亲子";
      if(this.power_radio == '0') this.power_radio = "公开"
      if(this.power_radio == '1') this.power_radio = "私密"
      //提交新建相册的上传信息
      this.request
        .post("/album", {
          album_name: this.albumName,
          album_des: this.album_msg,
          album_power: this.power_radio,
          album_url: this.album_url,
          album_type: this.active,
        })
        .then((res) => {
          if (res.status != 0) {
            this.$toast("创建失败");
          }
          this.$toast("创建成功");
          this.$router.push({ path: "/album" });
        });
    },
    normal_click() {
      this.albumType.normal = true;
    },
    couple_click() {
      this.albumType.couple = true;
    },
    travel_click() {
      this.albumType.travel = true;
    },
    shared_click() {
      this.albumType.shared = true;
    },
    parrent_click() {
      this.albumType.parrent = true;
    },
  },
};
</script>

<style lang="less" scoped>
.newAlbum {
  width: 100%;
  height: 100%;
  margin: 0 auto;

  .van-nav-bar {
    padding: 1.9% 0 0 0;
  }

  .uploadPic {
    width: 100%;
    padding: 7% 7.2%;
  }
  .album_power {
    width: 100%;
    padding: 4% 6.9%;
    font-size: 0.9em;
  }
  .writeCon {
    padding: 0 4.8%;

    .van-cell {
      padding: 0;
      margin-bottom: 2.4%;
    }

    /deep/.field_con .van-field__control {
      border: 2px solid #ccc;
      border-radius: 5px;
    }
  }
  .liner {
    height: 13pt;
    width: 100%;
    background-color: #eee;
  }
  .theme {
    width: 90%;
    margin: 0 auto;

    .theme_title {
      font-weight: 500;
      font-family: "SourceHanSansCN";
    }

    .van-tabbar--fixed {
      position: static;
    }
  }
  .people {
    width: 90%;
    margin: 0 auto;

    .people_title {
      font-weight: 500;
      font-family: "SourceHanSansCN";
    }

    .van-row--flex {
      width: 90%;
      margin: 0 auto;
    }

    .van-col {
      margin-right: 4.7%;
    }
  }
}
</style>